<ng-ccontainer *ngIf="state$ | async; let state">
    <ng-container *ngIf="state?.contextMenuOpen">
        <ul class="dropdown-menu px-0 py-1" role="menu" style="display: block">
            <li role="menuitem">
                <button
                    (click)="editContextMenuAction($event)"
                    class="dropdown-item d-flex"
                    type="button"
                >
                    <i class="fa fa-pencil"></i>
                    <span class="ml-1">Edit</span>
                </button>
            </li>
            <li role="menuitem">
                <button (click)="unloadContextMenuAction($event)" class="dropdown-item d-flex" type="button">
                    <i class="fa fa-times text-danger"></i>
                    <span class="ml-1">Unload</span>
                </button>
            </li>
        </ul>
    </ng-container>
</ng-ccontainer>
<div
    *ngIf="state$ | async; let state"
    [ngClass]="{'selected': state.selected, 'stored': state.stored, 'login-filled-once': state.account.loginFilledOnce}"
    class="btn-group"
    [title]="state.account.progress.syncProgress || ''"
>
    <a class="btn btn-sm btn-secondary" href="mailto:{{ state.account.accountConfig.login }}">
        <electron-mail-unread-badge
            *ngIf="state.account.notifications.unread"
            [value]="state.account.notifications.unread"
            class="mr-1 letters"
        ></electron-mail-unread-badge>
        <i [class]="state.account.notifications.loggedIn ? 'd-flex fa fa-unlock' : 'd-flex fa fa-lock'"></i>
        <div *ngIf="state.loginDelayed" class="d-flex mr-1 login-delay">
            <i *ngIf="state.account.loginDelayedUntilSelected" class="fa fa-hand-pointer-o"></i>
            <span class="letters" *ngIf="state.account.loginDelayedSeconds; let remainingSeconds">{{ remainingSeconds }}</span>
        </div>
        <div class="d-flex flex-grow-1 letters login">{{ state.title }}</div>
    </a>
    <button
        (click)="toggleViewMode($event)"
        *ngIf="state.stored"
        class="btn btn-sm btn-secondary"
        title="Toggle online/database view mode"
    >
        <i
            [ngClass]="{
                'syncing': state.account.progress.syncing,
                'fa-database': state.account.databaseView,
                'fa-plug': !state.account.databaseView
            }"
            class="fa"
        ></i>
    </button>
</div>
